<template>
	<a-modal :centered="true" visible title="修改密码" width="416px" @cancel="CloseModal">
		<div class="update-password">
			<a-form ref="formRef" class="no-required-flag-form" layout="horizontal" :model="formData" :rules="formRules">
				<div class="update-password-item">新密码</div>
				<a-form-item name="password" label-align="left">
					<a-input-password
						v-model:value.trim="formData.password"
						style="width: 336px; height: 36px"
						:maxlength="20"
						placeholder="请输入新密码"
					></a-input-password>
				</a-form-item>
				<a-form-item name="confirmPassword" label-align="left" style="margin-top: 32px">
					<div class="update-password-item">再次输入新密码</div>
					<a-input-password
						v-model:value.trim="formData.confirmPassword"
						style="width: 336px; height: 36px"
						placeholder="请再次输入新密码"
						:maxlength="20"
					></a-input-password>
				</a-form-item>
			</a-form>
		</div>

		<template #footer>
			<a-button size="small" class="btn-default" @click="CloseModal">取消</a-button>

			<a-button size="small" type="primary" :loading="loading" @click="FormSave">确定</a-button>
		</template>
	</a-modal>
</template>

<script setup lang="ts" name="update-password">
import { g6RegValidate } from 'glasssix-utils-ts';
import type { Rule } from 'ant-design-vue/es/form';
import { useG6Crypto } from '@/global-hooks/base.hooks';
import { AccountAPI } from '../../../api';
import type { TsResetPwdForm, TsAccountModalType } from '../../../type';
const props = withDefaults(defineProps<{ userId: string | number; type?: TsAccountModalType }>(), {
	userId: '',
	type: 'password'
});

const emits = defineEmits<{
	(e: 'ok', flag: 'password', oldId: string | number): void;
	(e: 'update:type', value: ''): void;
}>();

const { cryptoObj } = useG6Crypto();
const $message: any = inject('$message');

const loading = ref<boolean>(false);
const formRef = ref();
const formData = reactive<TsResetPwdForm>({
	id: '',
	password: '',
	confirmPassword: ''
});
// eslint-disable-next-line no-useless-escape
const reg = /^(?=.*[a-zA-Z])(?=.*[0-9])(?=.*[!@#$%^&\_+\-*/.])(?!.*[\u4E00-\u9FFF]).{6,32}$/;
const regErrorText = '密码必须包含数字、字母、字符且不少于6位';
const formRules: Record<string, Rule[]> = {
	password: [
		{
			required: true,
			validator: (rule: Rule, value: string) =>
				g6RegValidate.checkPassword(rule, value, { regex: reg, noValueTxt: '请输入新密码', errRegexTxt: regErrorText })
		}
	],
	confirmPassword: [
		{
			required: true,
			validator: (rule: Rule, value: string) =>
				g6RegValidate.checkPassword(rule, value, {
					regex: reg,
					noValueTxt: '请输入确认密码',
					errRegexTxt: regErrorText,
					isSecond: true,
					firstValue: formData.password
				})
		}
	]
};

const CloseModal = (): void => {
	emits('update:type', '');
};

const FormSave = (): void => {
	g6RegValidate.formSubmit(formRef.value, async () => {
		try {
			loading.value = true;
			const cryptoData = cryptoObj.enCryptoFun(formData);
			const res: TsRes = await AccountAPI.password(cryptoData);
			if (res.code === 0) {
				$message.success('密码修改成功');
				CloseModal();
				emits('ok', 'password', props.userId);
			}
		} finally {
			loading.value = false;
		}
	});
};

onMounted(() => {
	formData.id = props.userId;
});
</script>

<style lang="less">
.ant-input-password-icon {
	color: @text02 !important;
}

.update-password {
	display: flex;
	padding: 40px 32px;
	justify-content: center;

	.update-password-item {
		margin-bottom: 8px;
		line-height: 22px; /* 157.143% */
		color: @text02;
	}

	.ant-input-password {
		border: 1px solid @borderColor02 !important;
		border-radius: 6px !important;
		color: @text01 !important;
		background-color: transparent !important;
	}
}
</style>
